<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->

</head>

<body>
    <div id="app">
        sdshduhauh{{message}}sdffajs
    </div>
    <script>
        //vue应用案例:
        // let vm = new Vue({
        //     el:"#app",
        //     data:{
        //         message:"数据"
        //     }
        // })
        // console.log(vm.$data);

        /* 在指定范围内渲染数据,初次渲染: 根据数据把数据里的内容渲染到视图上
         */
        var data = {
            message: "我的数据"
        }
        //在指定范围内查找 {{message}} 字符

        var APPEle = document.querySelector("#app");
        var str = APPEle.innerHTML;
        console.log(str);

        /* 
        通过正则查找{{}} 的内容
        () 分组  [1-30] 集合 1到3或1-0  {1,5} 1或者5
        ? 只匹配一次   + 匹配一次或多次  {1,} 匹配一次或一次以上
        ^ 在开头是指定某字符为开头   在内部是取反
        */
        var reg = /\{\{([^{}]+)\}\}/;
        if (reg.test(str)) {
            console.log("有花括号");
            var $1 = RegExp.$1;
            console.log($1);
            var message = data[$1];
            APPEle.innerHTML = APPEle.innerHTML.replace(reg, message);
        }

        //二次渲染
        /* 
            把数据观察起来
            死循环bug: get 的触发条件是 data['message'] ,当触发 get 的时候会返回 data['message']
        */
        var val = data['message'];
        Object.defineProperty(data, "message", {

            get: function () {
                console.log("get");
                return val;
            },
            set: function (newvalue) {
                console.log("set");
                //监听数据改变后,获取最新数据,把旧的数据替换掉
                var oldval = message;
                //通过replace把旧的数据替换成新的修改的值
                APPEle.innerHTML = APPEle.innerHTML.replace(oldval, newvalue)
                if (val !== newvalue) {
                    val = newvalue;
                }
            },
            configurable: true,
            enumerable: true
        })
        console.log(data);
    </script>
</body>

</html>